<!DOCTYPE html>
<html lang="zh_CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>修改个人信息</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport"
		content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

	<!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

	<!-- 固定的css 和 common.js 的引用    -->
	<link rel="stylesheet" href="https://gitee.com/huaflower/honeybee-commonfile/raw/master/css/sm.min.css">
	<link rel="stylesheet" href="https://gitee.com/huaflower/honeybee-commonfile/raw/master/css/sm-extend.min.css">
	<script type="text/javascript" src="https://gitee.com/huaflower/honeybee-commonfile/raw/master/common/common/common.js"></script>

	<script type="text/javascript" src="https://gitee.com/huaflower/honeybee-commonfile/raw/master/js/js/vconsole.min.js"></script>
		<script>
			var vConsole = new VConsole();
		</script>



	<style type="text/css">
		/*css 的样式都放在这里*/
		.page {
			background-color: white;
		}

		/* #change_layout{
			width: 84%;
  		margin-top: 1rem;
  		margin-left: 8%;
  	}
  	#nicheng_layout, #mobile_layout {
  		margin-bottom: 1rem;
  	}
  	#nicheng_layout_content,#shoujihao_layout_content{
  		padding-bottom: 0.3rem;
  		padding-top: 0.3rem;
  		border-bottom: solid 2px gainsboro;
  	} */
		#determine {
			border-radius: 7px;
			background-color: #02CAAD;
			padding-bottom: 0.4rem;
			padding-top: 0.4rem;
			margin-top: 1rem;
			width: 60%;
			margin-left: 20%;
			text-align: center;
		}

		.list-block .item-title.label {
			width: 25%;
		}

		.list-block .item-input input {
			width: 100%;
		}

		/*#determine_div{
  		margin-left: 10%;
  		margin-right: 10%;
		background-color: #02CAAD;
  	}*/

		.input_btn a {
			width: 65px;
			background-color: #02CAAD !important;
		}

		.showLi {
			display: none;
		}

		/* table,tr{
  		width: 100%;
  	}
  	.first_td{
  		width: 25%;
  	}  	 
  	.second_td{
  		width: 50%;
  	}
		 */
		input {
			border: none;
		}
	</style>


</head>

<body>
	<div class="page-group">
		<div class="page page-current">

			<div class="list-block">
				<ul>
					<li>
						<div class="item-content">
							<div class="item-inner">
								<div class="item-title label">昵称</div>
								<div class="item-input">
									<input type="" name="" id="input_nickname" value="" placeholder="请输入昵称" />
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="item-content">
							<div class="item-inner">
								<div class="item-title label">手机号</div>
								<div class="item-input">
									<input type="" name="" id="input_shoujihao" value="" readonly placeholder="请输入手机号" />
								</div>
								<div class="input_btn">
									<a id="changeBtn" href="#" class="button button-fill">更换</a>
								</div>
							</div>
						</div>
					</li>
					<li class="showLi">
						<div class="item-content">
							<div class="item-inner">
								<div class="item-title label">新手机号</div>
								<div class="item-input">
									<input type="" name="" id="newmobile" value="" maxlength="11" placeholder="请输入新手机号" />
								</div>
							</div>
						</div>
					</li>
					<li class="showLi">
						<div class="item-content">
							<div class="item-inner">
								<div class="item-title label">验证码</div>
								<div class="item-input">
									<input type="" name="" id="smscode" value="" placeholder="请输入验证码" />
								</div>
								<div class="input_btn">
									<a id="sendCode" href="#" class="button button-fill">验证码</a>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div id="determine" onclick="determine()">
				<div id="determine_div">
					<span id="">
						<font color="white">确定</font>
					</span>
				</div>
			</div>

			<!-- html代码内容区域 -->
			<!-- <div id="change">
			<div id="change_layout">

				<div id="nicheng_layout">
					<div id="nicheng_layout_content">
						<table>
							<tr>
								<td class="first_td">昵称</td>
								<td class="second_td" id="address_nickname">
									<input type="" name="" id="input_nickname" value="" placeholder="请输入昵称" />
								</td>
							</tr>
						</table>
					</div>
			
				</div>
				<div id="mobile_layout">
					<div id="shoujihao_layout_content">
						<table>
							<tr>
								<td class="first_td">手机号</td>
								<td class="second_td" id="address_mobile">
									<input type="" name="" id="input_shoujihao" value="" readonly placeholder="请输入手机号" />
								</td>
							</tr>
						</table>
					</div>
				</div>
				
			</div>
			<div id="determine" onclick="determine()">
				<div id="determine_div">
					<span id="">
						<font color="white">确定</font>
					</span>
				</div>
			</div>
			
			
		</div> -->


		</div>
	</div>





	<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
	<script type="text/javascript"
		src="https://gitee.com/huaflower/honeybee-commonfile/raw/master/js/jquery-1.11.1.min.js"></script>
	<!-- 这一行代码是为了 避免js冲突 -->
	<script type="text/javascript">var $$ = jQuery.noConflict();</script>
	<script type='text/javascript' src='https://gitee.com/huaflower/honeybee-commonfile/raw/master/zepto/zepto.min.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='https://gitee.com/huaflower/honeybee-commonfile/raw/master/js/sm.min.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='https://gitee.com/huaflower/honeybee-commonfile/raw/master/js/sm-extend.min.js'
		charset='utf-8'></script>


	<script type="text/javascript">
		$$('#changeBtn').click(function () {
			$$('#sendCode').text('验证码');
			count = 0;
			if ($(this).text() == '更换') {
				$$('.showLi').show();
				$(this).text('取消');
			} else {
				$$('.showLi').hide();
				$(this).text('更换');
			}
		});

		var count = 60;

		$$('#sendCode').click(function () {
			if ($$('#sendCode').text() != '验证码') {
				return;
			}
			$$('#newmobile').val($$.trim($$('#newmobile').val()));
			var newmobile = $$('#newmobile').val();
			if (!newmobile) {
					$.toast('手机号不能为空', 2000);
					return;
				}

				if (newmobile.length != 11 || newmobile[0] != 1) {
					$.toast('请输入规范的手机号', 2000);
					return;
				}

				if (isNaN(newmobile)) {
					$.toast('手机号必须为纯数字', 2000);
					return;
				}
				let params = {
					name: newmobile
				}
				count = 60;
				countDown();
				net_request('post', '/user/verify', params);
		});
		function countDown() {
			setTimeout(() => {
					if (count > 1) {
						count--
						$$('#sendCode').text(count);
						countDown(count);
					} else {
						$$('#sendCode').text('验证码');
					}
				}, 1000)
		}
		// 函数区域，函数放在“初始化区域的上面”
		function determine() {
			$$("#input_nickname").val($$.trim($$("#input_nickname").val()));
			$$('#newmobile').val($$.trim($$('#newmobile').val()));
			$$('#smscode').val($$.trim($$('#smscode').val()));
			//		$.toast('操作成功', 2345, 'success top');
			var a = $$("#input_nickname").val();
			var b = $$("#input_shoujihao").val();
			var newmobile = $$('#newmobile').val();
			var smscode = $$('#smscode').val();
			console.log(a);
			console.log(b);
			if (!a) {
				$.toast('昵称不能为空', 2000);
				return;
			}
			if (a.length > 10) {
				$.toast('昵称长度不能大于10', 2000);
				return;
			}
			if ($$('#changeBtn').text() == '取消') {
				if (!newmobile) {
					$.toast('手机号不能为空', 2000);
					return;
				}

				if (newmobile.length != 11 || newmobile[0] != 1) {
					$.toast('请输入规范的手机号', 2000);
					return;
				}

				if (isNaN(newmobile)) {
					$.toast('手机号必须为纯数字', 2000);
					return;
				}
				
				if (!smscode) {
					$.toast('验证码不能为空', 2000);
				}
			}


			var params = {
				nickname: a,
				mobile: b
			}

			if ($$('#changeBtn').text() == '取消') {
				params.newmobile = newmobile;
				params.smscode = smscode;
			}
			console.log(params)

			net_request('post', '/user/update', params, changesuccessCallBack, changeerrorCallBack);

		}

		//	成功提交的接口
		function changesuccessCallBack(data) {
			console.log(data);

			native_showtoast("修改完成");
			//$.toast('修改完成', 2000);
			//通知客户端返回上一个页面
			native_goto('local/finish');
		}

		function changeerrorCallBack(data) {
			console.log(data);
		}


		//	调取原个人信息接口
		function getParams(data) {
			// data需要转成json调用 ，函数urlParamParseJson();
			//var jsonData = urlParamParseJson(data);
			var params = {
				//	user_id:jsonData.id,
			}
			net_request('get', 'user/info', params, infosuccessCallBack, errorCallBack);
		}


		//成功的回调函数
		function infosuccessCallBack(data) {
			// isNotNull() 用来判断字段不为空
			if (isNotNull(data)) {
				//        console.log(data);
				if (data.success == true) {
					console.log(data);
					var curval = data.data;
					// isNotNull() 用来判断字段不为空
					if (isNotNull(curval.nickname)) {
						$$("#input_nickname").attr("value", curval.nickname);
					}
					if (isNotNull(curval.name)) {
						$$("#input_shoujihao").attr("value", curval.name);
					}

				}
			}
		}
		// 失败的回调函数
		function errorCallBack(data) {
			console.log(data);
		}



		$$(function () {

			//getParams("getParams?id="+curuserid);

			$.init();
		});

	</script>
</body>

</html>